<!--  -->
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="340px"
    :show-close='false'
  >
    <div class="report-loading">
      <div class="effect">
        <div class="blueball1"></div>
        <div class="blueball2"></div>
      </div>
      <p>数据加载中,请耐心等待</p>
    </div>
  </el-dialog>
</template>

<script lang='ts'>
import { Component, Vue, PropSync } from 'vue-property-decorator'
@Component({ name: 'Loading' })
export default class Loading extends Vue {
  @PropSync('show', { type: Boolean }) private dialogVisible!: boolean
}
</script>
<style lang='stylus' scoped>
// .report-loading
//   height  200px
/deep/.el-dialog__header
  display none
</style>
<style scoped>
.effect{
  width:100%;
  height: 500px;
  position: relative;
  padding-top:50px;
  filter:contrast(10);
  background:#fff;
}
.blueball1{
  width:20px;
  height:20px;
  background:#00f;
  padding:10px;
  border-radius:50%;
  position:absolute;
  top:230px;
  left:0;
  z-index:2;
  filter:blur(8px) ;
  animation:bball1 6s infinite;
}
.blueball2{
  width:20px;
  height:20px;
  background:#00f;
  padding:10px;
  border-radius:50%;
  position:absolute;
  top:230px;
  left:60px;
  z-index:2;
  filter:blur(8px) ;
  animation:bball2 6s infinite;
}
@keyframes bball1{
  0%,100%{
    left:0;
    top:230px;
    width:20px;
    height:20px;
  }
  20%{
    top:230px;
    width:20px;
    height:20px;
  }
  85%{
    top:230px;
    left:75px;
    width:90px;
    height:70px;
  }
  90%{
    top:228px;
    width:75px;
    height:85px;
  }
  50%{
    top:215px;
    left:110px;
    width:110px;
    height:110px;
  }
}
@keyframes bball2{
  0%,100%{
    left:240px;
    top:230px;
    width:80px;
    height:80px;
  }
  20%{
    top:230px;
    width:80px;
    height:80px;
  }
  85%{
    top:230px;
    left:165px;
    width:90px;
    height:70px;
  }
  90%{
    top:228px;
    width:75px;
    height:85px;
  }
  50%{
    left:110px;
    top:215px;
    width:110px;
    height:110px;
  }
}
</style>
